<template>
  <div class="textarea_max">
    <!-- <textarea
    class="input-textarea"
	:style="{height: height + 'px'}"
    v-model="recommend"
    :placeholder="placeholder"
	placeholder-class="placeholder"
    :maxlength="contentNum"
	>
    </textarea> -->
	<appTextarea
		:autoHeight="autoHeight"
		class="input-textarea"
		:style="{height: !autoHeight?(height + 'px'):'auto'}"
		v-model="recommend"
		:placeholder="placeholder"
		:maxlength="hasMaxLength ? contentNum : -1"
		:disabled="disabled"
		placeholder-class="placeholder"
		@blur="blur"
	>
	</appTextarea>
    <span class="num" v-if="showTip">{{ recommend.length }}/{{contentNum}}</span>
    <span class="num" v-if="showNum">{{ recommend.length }}</span>
	<slot></slot>
  </div>
</template>

<script>
import appTextarea from './app-textarea'
// 配合 van-cell-group 使用
export default {
	name: 'AppFiledTextarea',
	components: {
		appTextarea
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		contentNum: {
			type: Number,
			default: 200
		},
		placeholder: {
			type: String,
			default: ''
		},
		height: {
			type: Number,
			default: 135
		},
		disabled: {
			type: Boolean,
			default: false
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		hasMaxLength: {
			type: Boolean,
			default: true
		},
		showTip: {
			type: Boolean,
			default: true
		},
		showNum: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			recommend: ''
		}
	},
	inheritAttrs: false,
	created() {
		this.recommend = this.$util.isEmpty(this.value) ? '' : this.value
	},
	watch: {
		recommend(val) {
			this.$emit('input', val)
		},
		value(val) {
			this.recommend = val
		}
	},
	methods: {
		blur() {
			this.$emit('blur')
		}
	}
}
</script>

<style lang="scss" scoped>
      .textarea_max {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        & .input-textarea {
		  background-color: #fff;
          display: inline-block;
          width: 100%;
		  padding: 30px 30px 70px 30px;
		  box-sizing: border-box;
        }
		.placeholder {
			font-size:28px;
			color:rgba(204,204,204,1);
		}
        & .num{
            position: absolute;
            bottom: 30px;
            right: 30px;
            font-size: 24px;
            font-weight: 400;
            color: #999999;

        }
    }
</style>
